<template>
	<view class="ghinfo">
		<!-- 头部 -->
		<view class="ghinfo_title" :class="cancelshow?'backgroundColor_6bcbb6':'backgroundColor_989898'">
			<view class="title_top">
				<image v-if="cancelshow" src="../../static/my/qryes_a.png" mode=""></image>
				<image v-else src="../../static/my/qryes_b.png" mode=""></image>
				<view class="font18 font-ffffff">{{detailsobj.typename}}</view>
			</view>
			<view class="font15 font-ffffff">请在就诊时间开始前到达医院挂号处或者使用微信取号功能取号</view>
		</view>
		<!-- 条码 -->
		<view class="barcode">
			<text class="font-323232 font18 font-b">就诊凭条</text>
			<view class="barcode_img">
				<tki-barcode ref="barcode" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" onval
					:val="detailsobj.order_code" :load-make="true" :opations="barOpations"></tki-barcode>
			</view>
			<!-- <image></image> -->
			<!-- <view class="font12">411156654616</view> -->
		</view>
		<!-- 边框 -->
		<view class="com_border"></view>
		<!-- 就诊信息 -->
		<view class="gh_title font-323232 font18 font-b">就诊信息</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊人</text>
			<view>{{detailsobj.user_the_patient.name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊卡号</text>
			<view>{{detailsobj.user_the_patient.code}}</view>
		</view>
		<!-- 		<view class="gh_info font-9c9c9d font15">
			<text>门诊号</text>
			<view>156445645646</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>排队号</text>
			<view>6</view>
		</view> -->
		<view class="gh_info font-9c9c9d font15">
			<text>就诊时段</text>
			<view>{{detailsobj.time}} {{detailsobj.begin_time}}-{{detailsobj.end_time}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医院名称</text>
			<view>{{detailsobj.hospital_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>就诊科室</text>
			<view>{{detailsobj.room_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医生姓名</text>
			<view>{{detailsobj.doctor_name}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15">
			<text>医生职称</text>
			<view>{{detailsobj.academic_title_name}}</view>
		</view>
		<!-- 边框 -->
		<view class="com_border margin_top"></view>
		<!-- 缴费详情 -->
		<view class="gh_title font-323232 font18 font-b">缴费详情</view>
		<view class="gh_info font-9c9c9d font15">
			<text>交易金额</text>
			<view class="font-323232 font18 font-b">￥{{detailsobj.money}}</view>
		</view>
		<!-- 		<view class="gh_info font-9c9c9d font15">
			<text>医院名称</text>
			<view>反思的佛教松岛枫囧</view>
		</view> -->
		<!-- 		<view class="gh_info font-9c9c9d font15">
			<text>医院单号</text>
			<view>5416515616165451</view>
		</view> -->
		<view class="gh_info font-9c9c9d font15">
			<text>平台单号</text>
			<view>{{detailsobj.order_code}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15" v-if="detailsobj.status == 'cancel'">
			<text>取消原因</text>
			<view>用户主动取消</view>
		</view>
		<view class="gh_info font-9c9c9d font15" v-if="detailsobj.status == 'cancel'">
			<text>取消时间</text>
			<view>{{detailsobj.deletetime}}</view>
		</view>
		<view class="gh_info font-9c9c9d font15" v-if="detailsobj.status == 'refund'">
			<text>退款原因</text>
			<view>用户主动取消</view>
		</view>
		<view class="gh_info font-9c9c9d font15" v-if="detailsobj.status == 'refund'">
			<text>退款时间</text>
			<view>用户主动取消</view>
		</view>

		<!-- 取消挂号 -->
		<view class="qx_button" @click="Oncancel" v-if="cancelshow">
			<view class="font-323232 font16">取消挂号</view>
		</view>
		<view class="qx_button" @click="Onreturn" v-else>
			<view class="font-323232 font16">返回首页</view>
		</view>
	</view>
</template>

<script>
	import tkiBarcode from '@/components/tki-barcode/tki-barcode'
	export default {
		components: {
			tkiBarcode
		},
		data() {
			return {
				//掉线码参数
				barOpations: {
					width: 4
				},
				canvasWidth: 0,
				canvasHeight: 0,
				cancelshow: true, //取消
				id: null, //订单ID
				detailsobj: {}, //详情
			}
		},
		onLoad: function(options) {
			this.id = options.id
			this.canvasWidth = uni.upx2px(700);
			this.canvasHeight = uni.upx2px(130);
			//订单详情
			this.Ondetails()
		},
		methods: {
			//订单详情
			Ondetails() {
				this.$Http({
					url: 'detailsHangNumberOrder',
					data: {
						order_code: this.id,
					}
				}).then(res => {
					// refund 已退款  cancel 已取消
					if (res.data.status == 'refund' || res.data.status == 'cancel') {
						this.cancelshow = false
					} else {
						this.cancelshow = true
					}
					//文字显示
					if (res.data.pay_status == 1) {
						//已支付
						if (res.data.status == 'refund') {
							res.data.typename = '挂号已退款'
						}
						if (res.data.status == 'normal') {
							res.data.typename = '挂号成功(已支付)'
						}
					}
					if (res.data.pay_status == 2) {
						//未支付
						if (res.data.status == 'refund') {
							res.data.typename = '挂号已取消'
						}
						if (res.data.status == 'normal') {
							res.data.typename = '预约成功(未支付)'
						}
					}
					wx.setNavigationBarColor({
						frontColor: '#ffffff', // 必写项
						backgroundColor: this.cancelshow ? '#6bcbb6' : '#989898', // 必写项
					})
					this.detailsobj = res.data
				})
			},
			//取消
			Oncancel() {
				var that = this
				uni.showModal({
					title: '取消号源提示',
					content: '取消后您将失去本号源,是否确认取消',
					confirmText: '保留号源', //确定文字
					confirmColor: '#6bcbb6',
					cancelText: '确定取消', //取消文字
					cancelColor: '#9c9c9c',
					success(res) {
						if (res.confirm) {

						} else if (res.cancel) {
							that.Oncancelinfo()
						}
					}
				})
			},
			//取消操作后的回调
			Oncancelinfo() {
				this.$Http({
					url: 'refundHangNumberOrder',
					data: {
						order_code: this.id,
					},
					show: true,
					type: 'post'
				}).then(res => {
					if (res.code == 1) {
						//订单详情
						this.Ondetails()
					}
				})
			},
			//返回
			Onreturn() {
				uni.switchTab({
					url: '/pages/home/index',
				})
			}
		}
	}
</script>

<style>
	.ghinfo {
		padding-bottom: 150rpx;
	}

	/* 头部 */
	.ghinfo_title {
		padding: 56rpx 25rpx 38rpx 25rpx;
	}

	.backgroundColor_6bcbb6 {
		background-color: #6bcbb6;
	}

	.backgroundColor_989898 {
		background-color: #989898;
	}

	.title_top {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.title_top image {
		height: 60rpx;
		width: 60rpx;
		margin-right: 20rpx;
	}

	/* 条码 */
	.barcode {
		padding: 38rpx 25rpx;
	}

	.barcode_img {
		width: 700rpx;
		height: 130rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		/* border: 1rpx solid #6bcbb6; */
	}

	.barcode view {
		text-align: center;
	}

	/* 就诊信息 */
	.gh_title {
		margin-top: 30rpx;
		padding-left: 25rpx;
	}

	.gh_info {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		padding: 0 25rpx;
		margin-top: 30rpx;
	}

	.gh_info view {
		width: 520rpx;
		text-align: right;
	}

	.margin_top {
		margin-top: 30rpx;
	}

	/* 取消订单 */
	.qx_button {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
	}

	.qx_button view {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
	}
</style>
